<!--
 * Copyright 2021 本系统版权归成都睿思商智科技有限公司所有
 * 用户不能删除系统源码上的版权信息, 使用许可证地址:
 * https://www.ruisitech.com/licenses/opensource.html
 -->
<template>
    <el-dialog title="维度属性" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" custom-class="nopadding">
      <template slot="title">
          <span class="el-dialog__title">维度属性</span>
          <button type="button" class="el-dialog__headerbtn minibtn" @click="$store.commit('setMini')" style="right:40px; font-size:14px; color:#909399;">
          <i class="fa" :class="isMini?'fa-expand':'fa-compress'"></i>
          </button>
        </template>
      <el-form ref="tableForm" :model="prop" :rules="rule" label-width="90px" size="mini">
        <el-form-item label="维度名称：" label-width="100px">
          {{ prop.dimdesc }}
        </el-form-item>
         <el-form-item label="显示名称：" label-width="100px" prop="name">
           <el-input v-model="prop.name" />
				</el-form-item>
        <el-form-item label="宽度：" label-width="100px">
          <el-input-number v-model="prop.colwidth" placeholder="默认值90" :min="60" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="隐藏维度：" label-width="100px" prop="hideNodeCallback">
           <p class="text-warning">设置隐藏维度的回调函数，函数 return true 表示隐藏，return false 表示显示。</p>
            <p class="text-warning">通过 extContext.get("参数标识") 获取参数值</p>
             function
            ( ) => {
            <codemirror :options="cmCfg" class="expscript" ref="myjscode" v-model="prop.hideNodeCallback"></codemirror>
             }
				</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()">确 定</el-button>
        <el-button @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import {baseUrl} from '@/common/biConfig'
import $ from 'jquery'
import * as utils from '@/view/portal/Utils'
import { codemirror } from 'vue-codemirror'
require("codemirror/mode/javascript/javascript.js")

export default {
  components:{
    codemirror
  },
  props:{

  },
  data(){
    return {
      show:false,
      prop:{
        dimdesc:null,
        name:null,
        hideNodeCallback: null,
        colwidth: null,
      },
      node:null,
      pos:null,
      comp: null,
      rule:{
        name:[{ required: true, message: "必填", trigger: "blur" }],
      },
      cmCfg:{ //sql编辑器配置
        mode: "text/javascript",
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets : true,
        autofocus: false,
        lineWrapping:true
      },
    }
  },
  mounted(){

  },
  computed: {
     ...mapState(["isMini"])
  },
  methods: {
    openDailog(node, pos, comp){
      this.show = true;
      this.node = node;
      this.pos = pos;
      this.comp = comp;
      let dim = comp.dims.filter(d => d.id === node.match)[0];
      this.prop.dimdesc = dim.dimdesc;
      this.prop.name = !dim.dimDisp || dim.dimDisp == "" ?dim.dimdesc:dim.dimDisp;
      this.prop.colwidth = dim.colwidth;
      if(dim.hideNodeCallback){
        this.prop.hideNodeCallback = unescape(dim.hideNodeCallback);
      }else{
        this.prop.hideNodeCallback = "";
      }
    },
    save(){
      this.$refs['tableForm'].validate((valid)=>{
        if(valid){
          let o = this.$parent;
          this.show = false;
          let comp = this.comp;
          let node = this.node;
          let dim = comp.dims.filter(d => d.id === node.match)[0];
          dim.dimDisp = this.prop.name;
          dim.colwidth = this.prop.colwidth;
          if(this.prop.hideNodeCallback){
            dim.hideNodeCallback = escape(this.prop.hideNodeCallback);
          }else{
            delete dim.hideNodeCallback;
          }
          let pos = this.pos;
          //更新col/row 的 desc
          utils.loopDims(pos==='row'?comp.rows:comp.cols, (a, b, c) =>{
            if(a.match === dim.id){
              a.desc = dim.dimDisp;
            }
          });
          o.setUpdate();
          o.tableView();
        }
      });
    },
  }
}
</script>
